<template>
    <ElDialog v-model="isShow" title="自定义查询" width="50%" @closed="handleClosed">
        <div style="width: 100%;text-align: right;margin-bottom: 10px;">
            <ElButton type="danger" @click="list = []">清空</ElButton>
            <ElButton type="primary" @click="addTj">增加</ElButton>
        </div>
        <ElTable class="list-table is-border" :="$attrs" border :data="list">
            <ElTableColumn label="字段">
                <template #default="{ row, $index }">
                    <ElSelect v-model="row.fieldName" clearable filterable
                        @change="(val) => handleFieldChange(val, row)">
                        <ElOption v-for="item in fields" :key="item.val" :label="item.name" :value="item.fieldName" />
                    </ElSelect>
                </template>
            </ElTableColumn>
            <ElTableColumn label="比较运算符">
                <template #default="{ row, $index }">
                    <ElSelect v-model="row.bjysf" filterable clearable>
                        <ElOption v-for="item in bjysf" :key="item.val" :label="item.text" :value="item.val" />
                    </ElSelect>
                </template>
            </ElTableColumn>
            <ElTableColumn label="条件值">
                <template #default="{ row, $index }">
                    <ElInput v-if="row.fieldType === '文本'" v-model="row.zhi"></ElInput>
                    <ElDatePicker v-if="row.fieldType === '日期'" v-model="row.zhi" format="YYYY-MM-DD"
                        valueFormat="YYYY-MM-DD" clearable />
                    <ElSelect v-if="row.fieldType === '字典'" v-model="row.zhi" clearable filterable>
                        <ElOption v-for="item in row.zdList" :key="item.val" :label="item.name" :value="item.val" />
                    </ElSelect>
                    <ElInputNumber v-if="row.fieldType === '数值'" v-model="row.zhi"></ElInputNumber>
                </template>
            </ElTableColumn>
            <ElTableColumn label="逻辑运算符">
                <template #default="{ row, $index }">
                    <ElSelect v-model="row.ljysf" clearable :disabled="shouldDisableLogicalOperator($index)">
                        <ElOption v-for="item in ljysf" :key="item.val" :label="item.text" :value="item.val" />
                    </ElSelect>
                </template>
            </ElTableColumn>
            <ElTableColumn label="操作" width="80">
                <template #default="{ row, $index }">
                    <ElButton type="danger" size="small" @click="deleteRow($index)">删除</ElButton>
                </template>
            </ElTableColumn>
        </ElTable>
        <div style="margin-top: 10px;">
            <ElButton type="primary" @click="$emit('query-data', list)">查询</ElButton>
            <ElButton @click="queryDataCancel()">取消</ElButton>
        </div>
    </ElDialog>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { getCustomizeQueryField, getDictInfo } from '../api';
import { ElSelect, ElTableColumn, ElInput, ElDatePicker, ElInputNumber, ElButton } from 'element-plus'

let list = ref([])
// 比较运算符
let bjysf = ref([
    { text: '小于', val: '小于' },
    { text: '小于等于', val: '小于等于' },
    { text: '大于', val: '大于' },
    { text: '大于等于', val: '大于等于' },
    { text: '等于', val: '等于' },
    { text: '不等于', val: '不等于' },
    { text: '包含', val: '包含' }
])
// 逻辑运算符
let ljysf = ref([
    { text: '且', val: ' and ' },
    { text: '或', val: ' or ' }
])

interface Props {
    zdycxObj;
    moduleName;
}

const props = defineProps<Props>();

// 显示
const isShow = computed(() => {
    console.log("visible computed:", props.zdycxObj);
    return props.zdycxObj.isShow;
});

const handleClosed = () => {
    props.zdycxObj.isShow = false;
}

const fields = ref([])
onMounted(async () => {
    fields.value = await getCustomizeQueryField(props.moduleName);
    console.log(fields);
});

const addTj = () => {
    list.value.push({});
}

// 处理字段选择变化
const handleFieldChange = async (fieldName, row) => {
    row.bjysf = '';
    row.zhi = '';
    row.fieldType = '';
    const selectedField = fields.value.find(field => field.fieldName === fieldName);
    row.fieldType = selectedField.fieldType;
    if (row.fieldType === '字典') {
        row.zdList = await getDictInfo(selectedField.dictType);
        row.bjysf = '等于';
    }
}

const deleteRow = (index) => {
    list.value.splice(index, 1);
    if (list.value.length > 0) {
        list.value[list.value.length - 1].ljysf = ''
    }
}

// 判断是否禁用逻辑运算符
const shouldDisableLogicalOperator = (index: number) => {
    // 最后一条必须禁用（因为没有下一条需要连接）
    if (index === list.value.length - 1) return true;
    // 只有一条数据时，第一条也要禁用（因为没有下一条需要连接）
    if (list.value.length <= 1) return true;
    // 其他情况不禁用
    return false;
};

const queryDataCancel = () => {
    props.zdycxObj.isShow = false;
}
</script>

<style scoped lang="scss"></style>